<%--
  Created by IntelliJ IDEA.
  User: 18383
  Date: 2023/3/10
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <style>
        th, td {
            text-align: center;
            font-size: 14px;
        }

        td > div {
            width: 45px;
            height: 45px;
            margin: 0 auto;
        }

        td img {
            width: 100%;
            height: 100%;
        }

        td > span {
            line-height: 45px;
        }

        td a {
            margin-top: 11px;
        }

        .form-group > span {
            color: red;
        }

        .form-group > label {
            margin-right: 15px;
        }

    </style>
</head>
<body>
<jsp:include page="../layout/manage_nav.jsp"></jsp:include>
<div class="container">
    <div style="margin-bottom: 10px;">
        <a data-toggle="modal" data-target="#addBookInfo" class="btn btn-success btn-sm">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加图书
        </a>
    </div>
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading" style="font-weight: bold">书籍列表</div>

        <!-- Table -->
        <table class="table table-hover">
            <thead>
            <tr>
                <th>图书封面</th>
                <th>书名</th>
                <th>作者</th>
                <th>ISBN</th>
                <th>出版社</th>
                <th>出版时间</th>
                <th>价格</th>
                <th>类别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items='${requestScope.list}' var="item">
                <tr>
                    <td>
                        <div>
                            <img src="..${item.cover}">
                        </div>
                    </td>
                    <td><span>${item.name}</span></td>
                    <td><span>${item.author}</span></td>
                    <td><span>${item.ISBN}</span></td>
                    <td><span>${item.publish}</span></td>
                    <td><span>${fn:substring(item.publish_time, 0, 19)}</span></td>
                    <td><span>${item.price}</span></td>
                    <td><span>${item.classify}</span></td>
                    <td>
                        <a href="/admin?m=deleteBook&bid=${item.id}" class="btn btn-danger btn-xs">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            删除
                        </a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<%--            添加图书--%>
<!-- LoginModal -->
<div class="modal fade" id="addBookInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="background-color: rgb(240,240,242);">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加图书</h4>
            </div>
            <form class="form-group" id="addBookInfoForm" method="post" action="/admin?m=addBookInfo">
                <div class="modal-body">
                    <div class="form-group">
                        <label>图书名称</label><span></span>
                        <input type="text" class="form-control" name="name" id="name" placeholder="请输入图书名称"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>作者</label><span></span>
                        <input type="text" class="form-control" name="author" id="author" placeholder="请输入作者"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>出版社</label><span></span>
                        <input type="text" class="form-control" name="publish" id="publish" placeholder="请输入图书出版社"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>国际标准书号(ISBN)</label><span></span>
                        <input type="text" class="form-control" name="ISBN" id="ISBN" placeholder="请输入图书ISBN"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>出版时间</label><span></span>
                        <input type="text" id="publish_time" class="form-control dt" placeholder="请输入日期" name="publish_time" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>图书简介</label><span></span>
                        <textarea name="detail" class="form-control" id="detail" rows="3" placeholder="请输入图书简介"
                                  style="resize: none"></textarea>
                    </div>
                    <div class="form-group">
                        <label>作者简介</label><span></span>
                        <textarea name="author_detail" class="form-control" id="author_detail" rows="3"
                                  placeholder="请输入作者简介" style="resize: none"></textarea>
                    </div>
                    <div class="form-group">
                        <label>图书目录</label><span></span>
                        <textarea name="context" class="form-control" id="context" rows="3" placeholder="请输入图书目录"
                                  style="resize: none"></textarea>
                    </div>
                    <div class="form-group">
                        <label>价格</label><span></span>
                        <input type="number" class="form-control" name="price" id="price" placeholder="请输入价格"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>图书封面</label><span></span>
                        <input type="text" class="form-control" name="cover" id="cover" placeholder="请输入图书封面url"
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>图书类别</label><span></span>
                        <select name="classify" id="classify" class="form-control">
                            <option value="文学" selected>文学</option>
                            <option value="小说">小说</option>
                            <option value="科技">科技</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../static/js/jquery-3.6.3.min.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="../static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="../static/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../static/plugins/jqueryvalidate/jquery.validate.js"></script>
<script src="../static/plugins/jqueryvalidate/messages_zh.js"></script>
<script src="../static/js/registerForm.js"></script>
<script>
    $(function () {
        $('.dt').datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            startDate: '0',
            language: 'zh-CN',
            autoclose: true,
            pickerPosition: 'down-right'
        })
    })
</script>
</body>
</html>
